<template>
  <div class="fountMusic">
    <div class="fountMusicMain conutain">
      <SwiperFount></SwiperFount>
      <!-- 推荐歌单 -->
      <RecommendPlay></RecommendPlay>
      <!-- 推荐新歌曲 -->
      <RecommendMusic @palyMusic="handlePlay"></RecommendMusic>
      <!-- 推荐歌手 -->
      <RecommendSongs></RecommendSongs>
    </div>
    <PlayBar :isShowTag="isShowTag" :musicUrl="musicUrl" :musicInfoObj="musicInfoObj"></PlayBar>
  </div>
</template>

<script>
import SwiperFount from './components/Swiper'
import RecommendPlay from './components/recommendPlay'
import RecommendMusic from './components/recommendMusic'
import RecommendSongs from './components/recommendSongs'
import PlayBar from '../../components/PlayBar'
export default {
  components: {
    SwiperFount,
    RecommendPlay,
    RecommendMusic,
    RecommendSongs,
    PlayBar
  },
  data () {
    return {
      isShowTag: false,
      musicUrl: '',
      musicInfoObj: null
    }
  },
  methods: {
    handlePlay (url, tag, i) {
      console.log(url, tag, i)
      this.isShowTag = tag
      this.musicUrl = url
      this.musicInfoObj = i
    }
  }
}
</script>

<style lang="less" scoped>
.fountMusic {
  height: 100%;
  width: 100%;
  padding-top: 20px;
  background-color: #f1f1f1;
  .fountMusicMain {
    // background-color: red;
  }
}
</style>
